<template>
  <div>
    <m-tabbar id="m_tabbar" v-model="select">
      <m-tabbar-item id='Home' isRouter>
        <img style="width: 20.5px;height: 22px" src="../../assets/shouye@2x.png" alt="" slot="icon-normal">
        <img style="width: 20.5px;height: 22px" src="../../assets/shouyexuabzhong@2x.png" alt="" slot="icon-active">
        首页
      </m-tabbar-item>
      <m-tabbar-item id='Supervise' isRouter>
        <img style="width: 15.5px;height: 22px" src="../../assets/jianli-weixuanzhong@2x.png" alt="" slot="icon-normal">
        <img style="width: 15.5px;height: 22px" src="../../assets/jianli-xuanzhong@2x.png" alt="" slot="icon-active">
        监理
      </m-tabbar-item>
      <m-tabbar-item id='Publish' isRouter>
        <img style="width: 40px;height: 40px" src="../../assets/fabu.png" alt="" slot="icon-normal">
        <img style="width: 40px;height: 40px" src="../../assets/fabu.png" alt="" slot="icon-active">
      </m-tabbar-item>
      <m-tabbar-item id='Message' isRouter>
        <img style="width: 22.5px;height: 22px" src="../../assets/luntan@2x.png" alt="" slot="icon-normal">
        <img style="width: 22.5px;height: 22px" src="../../assets/luntan-xuanzhong@2x.png" alt="" slot="icon-active">
        论坛
      </m-tabbar-item>
      <m-tabbar-item id='My' isRouter>
        <img style="width: 17px;height: 22px" src="../../assets/wodeweixuanzhong@2x.png" alt="" slot="icon-normal">
        <img style="width: 17px;height: 22px" src="../../assets/wodexuanzhong@2x.png" alt="" slot="icon-active">
        我的
      </m-tabbar-item>
    </m-tabbar>
  </div>
</template>

<script>
  import mTabbar from './tabbar'
  import mTabbarItem from './tabbar-item'

  export default {
    components: {
      mTabbar,
      mTabbarItem
    },
    data () {
      return {
        select: 'Home'
      }
    }
  }
</script>


<style lang="scss" scoped>
  #m_tabbar {
    .m-tabbar-item {
      position: relative;
      width: 20%;
      z-index: 1111;
      a {
        color: #949494;
        text-decoration: none;
      }
    }
    .m-tabbar-item.is-active .m-tabbar-item-text {
      color: #20a0ff;
    }
    .m-tabbar-item.is-active .m-tabbar-item-text span a {
      color: #20a0ff;
    }
  }
</style>
